.project-preview {
  padding: 2rem;

  .tips-text {
    color: #777;
  }

  .emoji-container {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
  }

  .emojis {
    position: relative;
    width: 363px;
    margin: 10px;
    padding: 0;
    background-color: #fff;

    li {
      z-index: 11;
      float: left;
      width: 28px;
      height: 24px;
      margin: -1px 0 0 -1px;
      padding: 4px 2px;
      overflow: hidden;
      text-align: center;
      list-style: none;
      border: 1px solid #e8e8e8;
      cursor: pointer;

      &:hover {
        position: relative;
        z-index: 12;
        border: 1px solid #63a35c;
      }
    }

    &::after {
      display: block;
      clear: left;
      content: '';
    }

    * {
      user-select: none;
    }
  }
}

.theme-dark {
  .project-preview {
    .emoji-container {
      border-color: #2d2d2d;
    }

    .emojis {
      background-color: inherit;

      li {
        border-color: #2d2d2d;

        &:hover {
          border: 1px solid #497744;
        }
      }
    }
  }
}
